<template>
  <el-container>
    <el-header>
      <div class="flex">
        <div>所有流程</div>
        <div class="function-btn" />
      </div>
      <el-row class="flex flex-between">
        <el-col :span="24">
          <el-date-picker
            v-model="ReportDate"
            type="daterange"
            align="right"
            unlink-panels
            :editable="false"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            @change="handleDateChange"
          />
        </el-col>
        <el-col :span="8" :offset="1">
          <el-select
            v-model="listQuery.InstanceResult"
            placeholder="流程状态"
            @change="instanceResultChange"
          >
            <el-option label="所有" :value="99" />
            <el-option label="草稿" :value="0" />
            <el-option label="审批中" :value="1" />
            <el-option label="完成" :value="2" />
            <el-option label="撤回" :value="3" />
            <el-option label="不同意" :value="4" />
          </el-select>
        </el-col>
        <el-col :span="24" :offset="1">
          <el-input
            v-model="listQuery.searchkey"
            placeholder="标题、流程号"
            class="filter-item"
            @keyup.enter.native="handleFilter"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="handleFilter"
            />
          </el-input>
        </el-col>
      </el-row>
    </el-header>
    <el-main class="main-full-height bg-white">
      <el-table
        v-loading="listLoading"
        :data="tableData"
        border
        stripe
        style="width: 100%"
      >
        <el-table-column label="序号" type="index" :index="indexMethod" width="70px" align="center" />
        <el-table-column prop="CustomName" label="标题" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="toDetail(scope.row.Id)">{{
              scope.row.CustomName
            }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="Code" label="单据号" align="center" width="150px;" />
        <el-table-column label="流程类型" prop="DesignName" width="120px" />
        <el-table-column prop="CreateUserName" label="提单人" />
        <el-table-column prop="CreateTime" label="提报日期" width="180px" />
        <el-table-column prop="ActivityName" label="当前审批人" width="180px" />
        <el-table-column label="流程状态" width="150px" align="center">
          <template slot-scope="{row}">
            <el-tag
              v-if="row.Status == 1 && row.InstanceResult == 0"
              type="info"
              size="medium"
            >草稿</el-tag>
            <el-tag
              v-if="row.Status == 1 && row.InstanceResult == 5"
              type="danger"
              size="medium"
            >退回</el-tag>
            <el-tag
              v-if="row.InstanceResult == 1 && row.ActivityType != 6 && row.ActivityType != 7"
              type=""
              size="medium"
            >审批中</el-tag>
            <el-tag
              v-if="row.InstanceResult == 2"
              type="success"
              size="medium"
            >完成</el-tag>
            <el-tag
              v-if="row.InstanceResult == 3"
              type="warning"
              size="medium"
            >撤回</el-tag>
            <el-tag
              v-if="row.InstanceResult == 4"
              type="danger"
              size="medium"
            >不同意</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          fixed="right"
          label="操作"
          width="200"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="toDetail(scope.row.Id)"
            >查看</el-button>
            <!-- <el-button
              v-if="scope.row.InstanceResult==1 "
              type="text"
              size="small"
              @click="handleRevocation(scope.row)"
            >撤回</el-button>
            <el-button
              v-if="scope.row.Status=='1' "
              type="text"
              size="small"
              @click="showDrawer(scope.row)"
            >编辑</el-button>
            <el-button
              v-if="scope.row.Status=='1' "
              type="text"
              size="small"
              @click="handleDel(scope.row)"
            >删除</el-button> -->
          </template>
        </el-table-column>
        <template slot="empty">
          <HelpTips :page-name="'myDocuments'" />
        </template>
      </el-table>
    </el-main>

    <el-footer>
      <el-pagination
        :total="total"
        :current-page.sync="listQuery.pageIndex"
        :page-size="listQuery.PageSize"
        layout="total, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
      />
    </el-footer>
    <billdetail ref="billdetail" :flow-instance-id="flowInstanceId" @loadData="loadData" />
  </el-container>
</template>
<script>
import billdetail from '@/views/components/billdetail'
import HelpTips from '@/views/components/common/helptips/help'
import { loadAllFlowInstances } from '@/api/flow/index'
export default {
  components: {
    billdetail,
    HelpTips
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一年',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      dialogVisible2: false,
      input3: '',
      list: null,
      total: 0,
      listLoading: false,
      currId: 99, //
      ReportDate: [],
      listQuery: {
        pageIndex: 1,
        PageSize: 20,
        searchkey: '',
        type: '',
        bt: 99, // 流程类型
        ReportStartDate: '', // 填报日期
        ReportEndDate: '', // 填报日期
        InstanceResult: 99// 流程状态
      },
      tableData: [],
      flowDesign: {},
      flowInstances: {},
      flowInstanceId: '',
      isJump: false,
      selectedIds: []
    }
  },
  created() {
    this.loadTable()
  },
  methods: {
    handleDateChange(val) {
      if (val) {
        this.listQuery.ReportStartDate = val[0] || ''
        this.listQuery.ReportEndDate = val[1] || ''
      } else {
        this.listQuery.ReportStartDate = ''
        this.listQuery.ReportEndDate = ''
      }
      this.loadTable()
    },
    // 点击翻页按钮
    handleCurrentChange(index) {
      this.listQuery.PageIndex = index
      this.loadTable()
    },
    indexMethod(index) {
      var pageIndex = this.listQuery.pageIndex <= 1 ? 0 : this.listQuery.pageIndex - 1
      return pageIndex * 20 + index + 1
    },
    loadTable() {
      this.listLoading = true
      loadAllFlowInstances(this.listQuery)
        .then((res) => {
          this.total = res.TotalItemCount
          this.tableData = res.TableData
          this.listLoading = false
        })
        .catch((re) => {
          this.listLoading = false
        })
      this.isJump = false
      // this.selectedIds = []
    },
    chooseItem(capp) {
      this.listQuery.pageIndex = 1
      this.currId = capp.id
      this.listQuery.bt = capp.id
      this.loadTable()
    },
    // // 编辑流程
    // showDrawer(row) {
    //   getFlowInstances(row.Id)
    //     .then((res) => {
    //       this.flowInstances = res.Data
    //       this.$refs.editBill.showBillDrawer()
    //     })
    //     .catch((res) => {
    //     })
    // },

    handleFilter() {
      this.listQuery.pageIndex = 1
      this.loadTable()
    },
    // 流程状态
    instanceResultChange() {
      this.listQuery.pageIndex = 1
      this.loadTable()
    },
    // 提报时间条件
    handleReportDateChange() {
      this.listQuery.pageIndex = 1
      this.loadTable()
    },

    toDetail(id) {
      this.flowInstanceId = id
      this.$refs.billdetail.showBillDrawer(id)
    },
    loadData() {
      this.listQuery.pageIndex = 1
      this.loadTable()
    },
    // handleRevocation(row) {
    //   var _this = this
    //   _this.$confirm('确认撤回流程【' + row.CustomName + '】吗?', '提示', {
    //     confirmButtonText: '确认',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   })
    //     .then(() => {
    //       revocation(row.Id).then(res => {
    //         _this.$message({
    //           message: res.Msg,
    //           type: 'success',
    //           duration: 3 * 1000
    //         })
    //         this.loadTable()
    //       })
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: 'info',
    //         message: '已取消删除'
    //       })
    //     })
    // },
    // handleDel(row) {
    //   var _this = this
    //   _this.$confirm('确认删除流程【' + row.CustomName + '】吗?', '提示', {
    //     confirmButtonText: '确认',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   })
    //     .then(() => {
    //       delById(row.Id).then(res => {
    //         _this.$message({
    //           message: res.Msg,
    //           type: 'success',
    //           duration: 3 * 1000
    //         })
    //         this.loadTable()
    //       })
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: 'info',
    //         message: '已取消删除'
    //       })
    //     })
    // },
    formartType(t) {
      var defaultV = '未知'
      switch (t) {
        case 1:
          defaultV = '考勤管理'
          break
        case 2:
          defaultV = '财务管理'
          break
        case 3:
          defaultV = '行政管理'
          break
        default:
          break
      }
      return defaultV
    }
  }
}
</script>
  <style lang="scss" scoped>
  .my-list {
    height: calc(100vh - 300px);
    overflow-x: hidden;
  }
  .edit-form {
    height: calc(100vh - 210px);
  }

  .el-form-item__content > div[class*="view-all"] {
    border: 1px solid #ddd;
    padding: 0 10px;
    border-radius: 5px;
    background-color: #f9f9f9;
    vertical-align: middle;
  }
  .aside-list-withsearch {
    padding-right: 0;
  }
  .aside-list-withsearch > div {
    padding-right: 10px;
  }
  .title {
    font-weight: bold;
    width: 100px;
  }
  </style>

